<template>
  <DefaultLayout>
    <h2>Blockchain Records</h2>
    <ul>
      <li v-for="record in blockchainRecords" :key="record.id">
        {{ record.details }}
      </li>
    </ul>
  </DefaultLayout>
</template>

<script>
import DefaultLayout from "@/layouts/DefaultLayout.vue";
import { fetchBlockchainRecords } from "@/api/blockchain";

export default {
  name: "AppBlockchain",
  components: {
    DefaultLayout,
  },
  data() {
    return {
      blockchainRecords: [],
    };
  },
  async created() {
    try {
      const response = await fetchBlockchainRecords();
      this.blockchainRecords = response.data;
    } catch (error) {
      console.error("Failed to fetch blockchain records:", error);
    }
  },
};
</script>
